<template>
  <div>
    <a-modal
      :title="title"
      :width="1200"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :footer="null"
      @ok="handleSubmit"
      @cancel="handleCancel">
      
      <!--    非海外仓  -->
      <a-card :bordered="false" v-if="!isOverseasStore">
        <h4>入库记录</h4>
        <s-table
          ref="storageRecordTable"
          size="default"
          :columns="storageRecordColumns"
          :data="storageRecordLoadData"
          :alert="true"
          :showPagination="false"
          :rowKey="(record) => record.code"
          :rowSelection="null"
        >
        <span slot="actionOutOrder" slot-scope="text, record">
        <!--    出库单明细 单独的按钮      -->
          <a
            @click="$refs.detailModal.show(record)">明细</a>
        </span>
        </s-table>
        
        <div class="mt-4"></div>
        
        
        <h4>发货记录</h4>
        <s-table
          ref="shipmentRecordTable"
          size="default"
          :columns="shipmentRecordColumns"
          :data="shipmentRecordLoadData"
          :alert="true"
          :showPagination="false"
          :rowKey="(record) => record.code"
          :rowSelection="null"
        >
        <span slot="actionOutOrder" slot-scope="text, record">
        <!--    出库单明细 单独的按钮      -->
          <a
            @click="$refs.deliverModal.show(record)">明细</a>
        </span>
        </s-table>
      
      </a-card>
      
      <!--    海外仓  -->
      <a-card :bordered="false" v-else>
        <h4>入库记录</h4>
        <s-table
          ref="overseasWarehouseStorageRecordTable"
          size="default"
          :columns="overseasWarehouseStorageRecordColumns"
          :data="overseasWarehouseStorageRecordLoadData"
          :alert="true"
          :showPagination="false"
          :rowKey="(record) => record.code"
          :rowSelection="null"
        >

        <span slot="actionOutOrder" slot-scope="text, record">
        <!--    出库单明细 单独的按钮      -->
          <a
            @click="$refs.inStoreModal.show(record)">明细</a>
        </span>
        
        </s-table>
      
      </a-card>
    </a-modal>
    <back-store-order-detail-modal ref="backStoreOrderDetailModal"/>
    <detail-modal ref="detailModal"/>
    <in-store-modal ref="inStoreModal"/>
    <deliver-modal ref="deliverModal"/>
  </div>
</template>

<script lang="ts">
import {Component, Vue, Ref} from "vue-property-decorator";

import {STable} from '@/components'
import {page as storageRecordPage,} from '@/api/modular/main/emsorder/emsOrderManage.js'

import detailModal from './detailModal.vue'
import inStoreModal from './inStoreModal.vue'
import BackStoreOrderDetailModal from './reverseExecuteOrderDetailModal.vue'
import DeliverModal from './deliverModal.vue'

type EmsOrder = {
  sourceOrderId: string
  scOrderId: string
  isOverseasStore: string
  orderId: string
}

@Component({
  components: {
    DeliverModal,
    STable,
    detailModal,
    inStoreModal,
    BackStoreOrderDetailModal
  }
})


export default class ProductionCenterRecordDetailPlanModal extends Vue {
  @Ref() readonly storageRecordTable!: any
  @Ref() readonly shipmentRecordTable!: any
  @Ref() readonly overseasWarehouseStorageRecordTable!: any
  @Ref() readonly backStoreOrderDetailModal!: BackStoreOrderDetailModal
  
  visible = false
  title = '反执行详情'
  confirmLoading = false
  queryParam = {
    materialType: '',
    orderId: '',
    pageSize: undefined
  }
  selectedRowKeys = []
  selectedRows = []
  
  emsOrder: Partial<EmsOrder> = {}
  
  extra = null
  overseasWarehouseStorageRecordColumns = [
    {
      align: 'center',
      title: '序号', width: '80px',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      title: '入库单号',
      dataIndex: 'orderNumber',
    },
    {
      title: '生产单号',
      dataIndex: 'sourceOrderNumber',
    },
    {
      title: '创建人',
      dataIndex: 'createUserName'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      align: 'center',
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: {customRender: 'actionOutOrder'}
    }
  ]
  storageRecordColumns = [
    {
      align: 'center',
      title: '序号', width: '80px',
      customRender: (text, record, index) => `${index + 1}`
    },
    {
      title: '入库单号',
      dataIndex: 'orderNumber',
      width: '230px',
      ellipsis: true
    },
    {
      title: '生产单号',
      width: '230px',
      dataIndex: 'sourceOrderNumber',
      ellipsis: true
    },
    {
      title: '生产单归属公司',
      dataIndex: 'sourceOrderTargetOrgName',
    },
    {
      title: '生产单排单时间',
      dataIndex: 'inProgressTime',
    },
    {
      title: '创建人',
      dataIndex: 'createUserName'
    },
    {
      align: 'center',
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      align: 'center',
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: {customRender: 'actionOutOrder'}
    }
  ]
  shipmentRecordColumns = [
    {
      title: '发货单号',
      dataIndex: 'orderNumber'
    },
    {
      title: '时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作人',
      dataIndex: 'createUserName',
    },
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      align: 'center',
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: {customRender: 'actionOutOrder'}
    }
  ]
  
  get materialType() {
    return this.queryParam.materialType = this.emsOrder?.isOverseasStore == 'N' ? this.$businessEnum.MATERIAL_TYPE_ENUM.product.id :
      this.$businessEnum.MATERIAL_TYPE_ENUM.overseasProduct.id
  }
  
  get isOverseasStore() {
    return this.materialType == this.$businessEnum.MATERIAL_TYPE_ENUM.overseasProduct.id
  }
  
  overseasWarehouseStorageRecordLoadData(parameter: { pageNo: number, pageSize: number }) {
    const {sourceOrderId, orderId} = this.emsOrder
    
    const params = {
      ...parameter,
      pageSize: -1,
      isReturnExecution: 2,
      sourceOrderId,
      planOrderId: orderId
    }
    return storageRecordPage(params).then((res) => {
      console.log('res', res)
      return res.data
    })
  }
  
  
  storageRecordLoadData(parameter: { pageNo: number, pageSize: number }) {
    const {sourceOrderId, orderId} = this.emsOrder
    const params = {
      ...parameter,
      pageSize: -1,
      isReturnExecution: 2,
      sourceOrderId,
      planOrderId: orderId,
      orderType: this.$businessEnum.ORDER_TYPE_ENUM.productionProductInOrder.id
      
    }
    return storageRecordPage(params).then((res) => {
      console.log('res', res)
      return res.data
    })
  }
  
  shipmentRecordLoadData(parameter: { pageNo: number, pageSize: number }) {
    const {sourceOrderId, orderId} = this.emsOrder
    
    const params = {
      ...parameter,
      pageSize: -1,
      sourceOrderId,
      planOrderId: orderId,
      orderType: this.$businessEnum.ORDER_TYPE_ENUM.deliverOrder.id
    }
    return storageRecordPage(params).then((res) => {
      console.log('res', res)
      return res.data
    })
  }
  
  show(record,) {
    this.visible = true
    console.log(record, '111')
    this.emsOrder = record
    setTimeout(() => {
      this.handleOk()
    }, 100)
  }
  
  
  handleOk() {
    if (!this.isOverseasStore) {
      this.storageRecordTable.refresh()
      this.shipmentRecordTable.refresh()
      
    } else {
      this.overseasWarehouseStorageRecordTable.refresh()
      
    }
  }
  
  handleSubmit() {
    this.visible = false
  }
  
  handleCancel() {
    this.visible = false
  }
  
  
}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
